<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>icon font</title>
        <link type="text/css" rel="stylesheet" href="../../dist/cute.css"/>
        <style type="text/css">
            .m8 {
                margin: 8px;
            }
            #fonts .box1 {
                display: block;
                width: 240px;
                float: left;
                font-size: 16px;
                margin-bottom: 10px;
                vertical-align: middle;
                color: #666;
            }
            #fonts .box1 .icon {
                margin-right: .5em;
            }
            p{
                font-size: 1.1em;
                margin-bottom: 2em;
            }
        </style>
    </head>
    <body class="m8">
        <p><i class="icon icon-android text-success"></i>级联样式表（Cascading Style Sheet）简称“CSS”，通常<i class="icon icon-phone text-info"></i>又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。<i class="icon icon-apple text-error"></i>


        <div id="fonts">
            <span class="box1"><i class="icon icon-pencil"></i>icon-pencil</span>
            <span class="box1"><i class="icon icon-bullhorn"></i>icon-bullhorn</span>
            <span class="box1"><i class="icon icon-camera"></i>icon-camera</span>
            <span class="box1"><i class="icon icon-image"></i>icon-image</span>
            <span class="box1"><i class="icon icon-location"></i>icon-location</span>
            <span class="box1"><i class="icon icon-clock"></i>icon-clock</span>
            <span class="box1"><i class="icon icon-phone"></i>icon-phone</span>
            <span class="box1"><i class="icon icon-mobile"></i>icon-mobile</span>
            <span class="box1"><i class="icon icon-bubble"></i>icon-bubble</span>
            <span class="box1"><i class="icon icon-user"></i>icon-user</span>
            <span class="box1"><i class="icon icon-users"></i>icon-users</span>
            <span class="box1"><i class="icon icon-cog"></i>icon-cog</span>
            <span class="box1"><i class="icon icon-remove"></i>icon-remove</span>
            <span class="box1"><i class="icon icon-eye"></i>icon-eye</span>
            <span class="box1"><i class="icon icon-star"></i>icon-star</span>
            <span class="box1"><i class="icon icon-heart"></i>icon-heart</span>
            <span class="box1"><i class="icon icon-info"></i>icon-info</span>
            <span class="box1"><i class="icon icon-cancel-circle"></i>icon-cancel-circle</span>
            <span class="box1"><i class="icon icon-checkmark-circle"></i>icon-checkmark-circle</span>
            <span class="box1"><i class="icon icon-close"></i>icon-close</span>
            <span class="box1"><i class="icon icon-checkmark"></i>icon-checkmark</span>
            <span class="box1"><i class="icon icon-minus"></i>icon-minus</span>
            <span class="box1"><i class="icon icon-blocked"></i>icon-blocked</span>
            <span class="box1"><i class="icon icon-loop"></i>icon-loop</span>
            <span class="box1"><i class="icon icon-share"></i>icon-share</span>
            <span class="box1"><i class="icon icon-pinToTop"></i>icon-pinToTop</span>
            <span class="box1"><i class="icon icon-envelope"></i>icon-envelope</span>
            <span class="box1"><i class="icon icon-bars"></i>icon-bars</span>
            <span class="box1"><i class="icon icon-search"></i>icon-search</span>
            <span class="box1"><i class="icon icon-user-2"></i>icon-user-2</span>
            <span class="box1"><i class="icon icon-arrow-up"></i>icon-arrow-up</span>
            <span class="box1"><i class="icon icon-apple"></i>icon-apple</span>
            <span class="box1"><i class="icon icon-android"></i>icon-android</span>
            <span class="box1"><i class="icon icon-windows8"></i>icon-windows8</span>
            <span class="box1"><i class="icon icon-cart"></i>icon-cart</span>
            <span class="box1"><i class="icon icon-flag"></i>icon-flag</span>
            <span class="box1"><i class="icon icon-post"></i>icon-post</span>
            <span class="box1"><i class="icon icon-plus"></i>icon-plus</span>
            <span class="box1"><i class="icon icon-cashBag"></i>icon-cashBag</span>
            <span class="box1"><i class="icon icon-mobile-2"></i>icon-mobile-2</span>
            <span class="box1"><i class="icon icon-question"></i>icon-question</span>
            <span class="box1"><i class="icon icon-arrowd"></i>icon-arrowd</span>
            <span class="box1"><i class="icon icon-arrowl"></i>icon-arrowl</span>
            <span class="box1"><i class="icon icon-arrowr"></i>icon-arrowr</span>
            <span class="box1"><i class="icon icon-arrowt"></i>icon-arrowt</span>
            <span class="box1"><i class="icon icon-downTriangle"></i>icon-downTriangle</span>
            <span class="box1"><i class="icon icon-renew"></i>icon-renew</span>
            <span class="box1"><i class="icon icon-fangwu"></i>icon-fangwu</span>
            <span class="box1"><i class="icon icon-cheliang"></i>icon-cheliang</span>
            <span class="box1"><i class="icon icon-jiaoyou"></i>icon-jiaoyou</span>
            <span class="box1"><i class="icon icon-jianli"></i>icon-jianli</span>
            <span class="box1"><i class="icon icon-chongwu"></i>icon-chongwu</span>
            <span class="box1"><i class="icon icon-jiaoyu"></i>icon-jiaoyu</span>
            <span class="box1"><i class="icon icon-fuwu"></i>icon-fuwu</span>
            <span class="box1"><i class="icon icon-jianzhi"></i>icon-jianzhi</span>
            <span class="box1"><i class="icon icon-quanzhi"></i>icon-quanzhi</span>
            <span class="box1"><i class="icon icon-ershou"></i>icon-ershou</span>
            <span class="box1"><i class="icon icon-lightning"></i>icon-lightning</span>
            <span class="box1"><i class="icon icon-pcCamera"></i>icon-pcCamera</span>
        </div>
    </body>
</html>

